<div class="modal modal-xl" id="detailModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">      
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Detil Lampiran</h4>
        <div class="jqload" style="position:absolute;top:12px;left:135px;"><i class="fa fa-circle-o-notch fa-spin"></i> Tunggu...</div>
      </div>
      <div class="modal-body" style="min-height:430px;">      
      <div class="row" id="dinamis">
        
      </div>
      </div>    
    </div>
  </div>
</div>

<div class="box box-primary">
	<div class="box-header">
		<h3 class="box-title">Pustaka Media</h3>
    <span class="box-title tmb-title">
      <a href="<?php echo site_url('media/add')?>" class="btn btn-xs btn-primary btn-flat"><i class="ion-plus-round"></i>&nbsp;&nbsp;Tambah</button></a>
    </span>
	</div>

	<div class="box-body">
  	<div class="wrap">
    
	    <?php 
        if(!empty($results)){
          foreach ($results as $row) {
          $dimension = getimagesize('uploads/' . $row['file_name']);
          $file_dimension =  $dimension[0] . ' x ' . $dimension[1];
      ?>
	    <div class="kotak" data-toggle="modal" data-target="#detailModal" onclick="detail(<?=$row['id_media']?>)">
	      <div class="kotakInner">
        
	        <img src="<?php echo image(site_url('uploads/'. $row['file_name']), 'lsquare')?>" />
	        <div class="titlekotak">
          <?php 
          if(strlen($row['title'])<20){
            echo $row['title'];
          }else{
          echo substr($row['title'],0,20) .'...';
          }
          ?>
          </div>
	      </div>
	    </div>
	    <?php
	  		}
	  	}
	    ?>

  	</div>
    <?php if(!empty($pagination)){?>
  	<div class="box-footer clearfix">
      <ul class="pagination pagination-sm no-margin pull-right">
        <?php echo $pagination; ?>
      </ul>        
    </div>
    <?php } ?>

  </div>
  <script>
    //detail
    function detail(id_media){
      $(".jqload").show();
      $("#dinamis").load("<?php echo site_url('media/detail');?>/"+id_media, function() {
          $('.jqload').hide();
      });
    }

    $('#detailModal').on('hidden.bs.modal', function (e) {
      $("#dinamis").text('');        
    });

    $(document).ajaxComplete(function(){
      $("#update").autosave({
        send: function() {
          $("#proses").show();
          $("#berhasil").hide();
          $("#gagal").hide();
        },
        success: function() {
          $("#berhasil").show();
          $("#proses").hide();
          $("#gagal").hide();
        },
        error: function(){
          $("#gagal").show();
          $("#proses").hide();
          $("#berhasil").hide();
        },        
        dataType: "html"
      });
    })

  </script>

